<template>
  <div class="app-container">

   <el-cascader
        v-model="categoryDTO"
        :options="categoryDTOList"
        :props = "myProps"
        @change="categoryDTOChange">
  </el-cascader>
  {{categoryDTO}}

    <div>
      <div style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddTrademarkDialog()">添加品牌</el-button>
      </div>
      <el-table
        stripe
        :data="tradeMarkExistList"
        style="width: 100%">

        <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="id" label="品牌ID" />
        <el-table-column prop="tmName" label="名称" />
        <el-table-column label="logo" width="320" align="center">
          <template slot-scope="scope">
            <div class="info">
                <img :src="scope.row.logoUrl" width="100px">
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-delete" 
                  @click="removeTrademarkById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加品牌" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
    {{selectedTradeMark}}

    ===
    {{selectedTradeMarkIds}}
        <el-table
          stripe
          style="width: 100%"
          :data="tradeMarkNotExistList"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>

          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="品牌ID" />
          <el-table-column prop="tmName" label="名称" />
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import categoryApi from '../../api/product/category.js'
import * as categoryTrademarkApi from '../../api/product/categoryTrademark.js'
export default {

  data() {
    return {
      dialogVisible:false,
      categoryDTO:[],//三级ID， category1_id,category2_id,category3_id
      categoryDTOList:[],
      myProps:{
         value:'id',
         label:'name'
      },
      tradeMarkExistList:[],//当前category3Id 分类包括的品牌
      tradeMarkNotExistList:[],
      selectedTradeMark:[],
      selectedTradeMarkIds:[]
    }
  },

  // 生命周期函数：内存准备完毕，页面尚未渲染
  created() {
  },

  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.findCategoryTree();
  },

  methods: {
    openAddTrademarkDialog(){
        this.dialogVisible = true;
        this.findCurrentTrademarkList();
    },
    findCategoryTree(){
      categoryApi.findCategoryTree().then(res=>{
        this.categoryDTOList = res.data.data;
      })
    },
    categoryDTOChange(){//分类改变的时候
      this.findTrademarkList();
    },
    findTrademarkList(){
      debugger
      let category3_id = this.categoryDTO[2];
      categoryTrademarkApi.findTrademarkList(category3_id).then(res=>{
        if(res.data.ok){
          this.tradeMarkExistList = res.data.data;
          console.log(this.tradeMarkExistList)
        }else{
          this.tradeMarkExistList=[];
        }
      })
    },
    findCurrentTrademarkList(){//Not exist
      debugger
      let category3_id = this.categoryDTO[2];
      categoryTrademarkApi.findCurrentTrademarkList(category3_id).then(res=>{
        if(res.data.ok){
          this.tradeMarkNotExistList = res.data.data;
          console.log(this.tradeMarkNotExistList)
        }else{
          this.tradeMarkNotExistList=[];
        }
      })
    },
    removeTrademarkById(trademarkId){
      //
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let category3_id = this.categoryDTO[2];
          categoryTrademarkApi.remove(category3_id,trademarkId)
            .then(res=>{
              alert(res.data.message)
              this.findTrademarkList();
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSelectionChange(val){
            debugger;
      this.selectedTradeMark = val;
      this.selectedTradeMarkIds = []
      /*
      for(let tradeMark of this.selectedTradeMark){//for each
        this.selectedTradeMarkIds.push(tradeMark.id);
      }

      for(let index in this.selectedTradeMark){//for
        this.selectedTradeMarkIds.push(this.selectedTradeMark[index]);
      }*/

      this.selectedTradeMark.forEach(a => {
        this.selectedTradeMarkIds.push(a.id);
      });
    },
    save(){

      let category3_id = this.categoryDTO[2];
      let categoryTrademarkDTO = {
        category3Id: category3_id,
        trademarkIdList: this.selectedTradeMarkIds
      } 
      categoryTrademarkApi.save(categoryTrademarkDTO).then(res=>{
        alert(res.data.message)
      })
    }
  }
}
</script>

